<template>
    <view class="wrap">
        <Navbar :title="title"></Navbar>
        <view class="searchbox">
            <u--input v-model="search" placeholder="请输入搜索关键字" prefixIcon="search" shape="circle"
                prefixIconStyle="color: #ffffff;" color="#fff" placeholderClass="placeholderStyle" style="height: 72rpx;background: #636883;border-radius: 36rpx;
border: 2rpx solid #FFFFFF;;" @confirm="toSearch"></u--input>
        </view>
        <view class="tabbox">
            <view class="tablist">
                <view v-for="item in tablist" :key="item.id" :class="item.id == currentId ? 'item_tab active' : 'item_tab'"
                    @click="changeTab(item)">
                    <text>{{ item.text }}</text>
                    <text v-if="item.id == currentId" class="line"></text>
                </view>
            </view>
        </view>
        <view class="content">
            <view class="select-box">
                <view class="choose-text">筛选分类</view>
                <view class="select-option" @click="showFirstOption">
                    <view>{{ firstText ? firstText : "一级科目" }}</view>
                    <u-icon name="arrow-down-fill" color="#64707D" size="10"></u-icon>
                </view>
                <view class="select-option" @click="showSecondOption">
                    <view>{{ secondText ? secondText : '二级科目' }}</view>
                    <u-icon name="arrow-down-fill" color="#64707D" size="10"></u-icon>
                </view>
                <view v-if="currentId == 1" class="select-option" @click="showThirdOption">
                    <view>{{ thirdText ? thirdText : '三级科目' }}</view>
                    <u-icon name="arrow-down-fill" color="#64707D" size="10"></u-icon>
                </view>
            </view>
            <view class="meal_list">
                <view class="list_title">
                    <view class="title_left">
                        <img class="list_icon" src="@/static/img/list_icon.png" alt="">
                        <text>套餐列表</text>
                    </view>
                    <view class="dis_flex just_bt al_center" @click="allcheck">
                        <view class="list_check">
                            <div class="all_check" v-show="isAllCheck"></div>
                        </view>
                        全选
                    </view>
                </view>
                <u-empty mode="list" v-if="!mealList.length"></u-empty>
                <view class="list">
                    <u-list @scrolltolower="scrolltolower" height="880rpx">
                        <u-list-item v-for="(item, index) in mealList" :key="item.MealId">
                            <view class="item_meal" @click="chooseItem(item)">
                                <view class="radio_box" :class="{ checked: item.isChecked }">
                                    <view v-if="item.isChecked" class="active_radio_box_inside"></view>
                                </view>
                                <view class="meal_detail">
                                    <view class="meal_name">{{ index + 1 }}.{{ item.Title }}</view>
                                    <view class="item_price">
                                        <view class="red_price">
                                            <view>￥</view>
                                            <view class="big_price">{{ item.SellingPrice }}</view>
                                        </view>
                                        <view class="original_price">原价：￥{{ item.SellingPrice }}</view>
                                        <!-- <view class="now_price">打后折：￥{{ item.CostPrice }}</view> -->
                                    </view>
                                </view>
                            </view>
                        </u-list-item>
                    </u-list>
                </view>
            </view>
        </view>
        <view class="buy_btn" @click="toBuy">购买</view>
        <!-- <BuyPop ref="refBuyPop" @submit="submitOrder"/> -->
        <!-- <PopWindow /> -->
        <u-picker :show="firstshow" :columns="typeFirstList" keyName="Name" @confirm="confirmFirstOption"
            @cancel="hideFirstOption"></u-picker>
        <u-picker :show="secondshow" :columns="typeSecondList" keyName="Name" @confirm="confirmSecondOption"
            @cancel="hideSecondOption"></u-picker>
        <u-picker :show="thirdshow" :columns="typeThirdList" keyName="CourseName" @confirm="confirmThirdOption"
            @cancel="hideThirdOption"></u-picker>
    </view>
</template>
<script>
import PopWindow from '@/components/PopWindow'
import Navbar from '@/components/nav.vue'
import BuyPop from '@/components/BuyPop.vue'
export default {
    data () {
        return {
            title: '慧考网课管理',
            tablist: [
                {
                    id: 0,
                    text: '套餐'
                },
                {
                    id: 1,
                    text: '班级'
                }
            ],
            currentId: 0,
            firstshow: false,
            typeFirstList: [],
            firstText: '',
            firstId: '',
            typeSecondList: [],
            secondshow: false,
            secondText: '',
            secondId: '',
            typeThirdList: [],
            thirdshow: false,
            thirdId: '',
            thirdText: '',
            search: '',
            pageSize: 10,
            pageIndex: 1,
            mealList: [],
            scrollFlag: true,
            checkedData: [],
            isAllCheck: false,
            dialogShow: false,
        }
    },
    components: {
        PopWindow, Navbar, BuyPop
    },
    created () {
        this.getFirstTypeList(2)
        this.getMealList()
    },
    methods: {
        // 切换一级分类
        changeTab (item) {
            this.currentId = item.id
            this.firstId = ''
            this.firstText = ''
            this.secondId = ''
            this.secondText = ''
            this.thirdId = ''
            this.thirdText = ''
            this.search = ''
            this.pageIndex = 1
            this.mealList = []
            this.getFirstTypeList(item == 0 ? 2 : 3)
            this.getMealList()
        },
        //获取一级分类
        async getFirstTypeList (val) {
            const res = await this.$http.get(`huikao/category`, { type: val })
            this.typeFirstList = [res.Data]
        },
        // 一级下拉选
        showFirstOption () {
            this.firstshow = true
        },
        confirmFirstOption (data) {
            console.log("🚀 ~ confirmFirstOption ~ data:", data)
            this.firstshow = false
            if (data.value[0].Name !== this.firstText) {
                this.firstText = data.value[0].Name
                this.firstId = data.value[0].GroupId
                this.secondId = ''
                this.secondText = ''
                this.getSecondTypeList()
            }
        },
        hideFirstOption () {
            this.firstshow = false
        },
        // 获取二级分类
        async getSecondTypeList () {
            const type = this.currentId == 0 ? 2 : 3
            const res = await this.$http.get(`huikao/subjects/${this.firstId}?type=${type}`)
            this.typeSecondList = [res.Data]
        },
        //弹出二级分类
        showSecondOption () {
            if (!this.firstText) {
                return uni.showToast({ title: "请选择一级科目", icon: 'none' })
            }
            this.secondshow = true
        },
        //点击二级分类
        confirmSecondOption (data) {
            this.secondshow = false
            if (data.value[0].Name !== this.secondText) {
                this.secondText = data.value[0].Name
                this.secondId = data.value[0].GroupId
                if (this.currentId == 1) {
                    this.thirdText = ''
                    this.thirdId = ''
                    this.getThirdTypeList()
                } else {
                    this.pageIndex = 1
                    this.mealList = []
                    this.getMealList()
                }
            }
        },
        //关闭二级分类
        hideSecondOption () {
            this.secondshow = false
        },
        // 获取三级分类
        async getThirdTypeList () {
            const res = await this.$http.get(`huikao/classsubjects/${this.secondId}`)
            this.typeThirdList = [res.Data]
        },
        //弹出三级分类
        showThirdOption () {
            if (!this.secondId) {
                return uni.showToast({ title: "请选择二级科目", icon: 'none' })
            }
            this.thirdshow = true
        },
        //选择三级分类
        confirmThirdOption (data) {
            this.thirdshow = false
            if (data.value[0].Name !== this.thirdText) {
                this.thirdText = data.value[0].CourseName
                this.thirdId = data.value[0].SubjectId
                this.pageIndex = 1
                this.mealList = []
                this.getMealList()
            }
        },
        //关闭三级分类
        hideThirdOption () {
            this.thirdshow = false
        },
        // 获取列表数据
        async getMealList () {

            let obj = {
                HuiKaoMealType: this.currentId == 0 ? 2 : 3,
                GroupId: this.secondId,
                KeyWord: this.search,
                PageSize: this.pageSize,
                PageIndex: this.pageIndex
            }
            if (this.currentId == 1) {
                obj.SubjectId = this.thirdId
            }
            uni.showLoading({ title: "加载中" });
            const res = await this.$http.get('huikao/meals', obj)
            uni.hideLoading()
            if (res.Data.length == 0) {
                this.scrollFlag = false
            }
            res.Data.forEach(item => {
                item.isChecked = false
            })
            this.isAllCheck = false;
            this.mealList = this.pageIndex == 1 ? res.Data : this.mealList.concat(res.Data)
        },
        scrolltolower () {
            if (this.scrollFlag) {
                this.pageIndex = this.pageIndex + 1
                this.getMealList()
            }
        },
        toSearch (item) {
            this.search = item
            this.mealList = []
            this.checkedData = []
            this.pageIndex = 1
            this.scrollFlag = true
            this.getMealList()
            this.isAllCheck = false;
        },
        //点击每一个套餐或单科
        chooseItem (item) {
            item.isChecked = !item.isChecked
            this.checkedData = this.mealList.filter(x => x.isChecked).map(x => x.Id)
        },
        allcheck () {
            this.mealList = this.mealList.map(item => {
                return { ...item, isChecked: this.isAllCheck ? false : true }
            })
            this.checkedData = this.mealList.filter(x => x.isChecked).map(x => x.Id)
            this.isAllCheck = !this.isAllCheck;
        },
        // 购买
        async toBuy () {
            /// 创建订单
            if (!this.checkedData.length) {
                console.log("🚀 ~ toBuy ~ this.checkedData:", this.checkedData)
                uni.showToast({
                    icon: 'none',
                    title: `请选择要购买的科目`,
                })
                return
            }
            // this.$refs.refBuyPop.openDialog();

            const res = await this.$http.post('huikao/order', this.checkedData)
            if (res.Code == 200) {
                uni.showToast({
                    title: '购买成功'
                });
                setTimeout(() => {
                    let pages = getCurrentPages();
                    let prevPage = pages[pages.length - 2]; //上一个页面
                    prevPage.$vm.setTabs(2)
                    uni.navigateBack()
                }, 1000);
            } else {
                uni.showToast({
                    icon: "error",
                    title: res.Msg
                });
            }



        }
    }
}
</script>
<style lang="scss" scoped>
.wrap {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #79829A;
    // background-image: url('../../../static/img/bg2.png');
    background-size: 750rpx 450rpx;
    background-repeat: no-repeat;

    .searchbox {
        padding: 32rpx 36rpx;
        box-sizing: border-box;

        /deep/.placeholderStyle {
            font-size: 28rpx;
            color: #ffffff !important;
        }
    }

    .tabbox {
        .tablist {
            height: 58rpx;
            padding: 0 36rpx;
            display: flex;
            align-items: center;
            justify-content: space-around;

            .item_tab {
                flex: 1;
                text-align: center;
                font-family: PingFang SC;
                font-weight: bold;
                font-size: 28rpx;
                color: #FFFFFF;
                opacity: 0.5;
                flex-shrink: 0;
                position: relative;
            }

            .active {
                font-family: PingFang SC;
                font-weight: bold;
                font-size: 32rpx;
                color: #FFFFFF;
                opacity: 1;
            }

            .line {
                width: 48rpx;
                height: 8rpx;
                background: #FFFFFF;
                border-radius: 200rpx;
                margin-top: 6rpx;
                position: absolute;
                bottom: -6rpx;
                left: 50%;
                transform: translateX(-50%);
                z-index: 9999;
            }
        }
    }

    .content {
        height: calc(100vh - 400rpx);
        background: #FFFFFF;
        border-radius: 34rpx 34rpx 0 0;
        margin-top: 18rpx;

        .select-box {
            display: flex;
            align-items: center;
            padding: 38rpx 28rpx;
            box-sizing: border-box;

            .choose-text {
                width: 48rpx;
                font-family: PingFang SC;
                font-size: 24rpx;
                color: #000000;
                flex-shrink: 0;
                display: flex;
            }

            .select-option {
                margin-left: 18rpx;
                min-width: 200rpx;
                background: #F5F5F5;
                border-radius: 12rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 20rpx 20rpx;
                box-sizing: border-box;
                font-family: PingFang SC;
                font-weight: bold;
                font-size: 26rpx;
                color: #000000;
                flex: 1;
            }
        }

        .meal_list {
            min-height: 330rpx;
            background: linear-gradient(180deg, #DFEDFD 0%, #FFFFFF 100%);
            border-radius: 32rpx 32rpx 0 0;
            padding: 26rpx 28rpx;
            box-sizing: border-box;

            .list_title {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .list_check {
                    width: 36rpx;
                    height: 36rpx;
                    background: #FFFFFF;
                    border-radius: 8rpx;
                    border: 2rpx solid #D2D2D2;
                    margin-right: 18rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .all_check {
                        width: 24rpx;
                        height: 24rpx;
                        background: #0051FF;
                        border-radius: 8rpx;
                        border: 2rpx solid #0051FF;
                    }
                }

                .title_left {
                    display: flex;
                    align-items: center;

                    .list_icon {
                        width: 34rpx;
                        height: 34rpx;
                    }

                    text {
                        display: inline-block;
                        margin-left: 18rpx;
                        font-family: PingFang SC;
                        font-weight: bold;
                        font-size: 36rpx;
                        color: #000000;
                    }
                }

                .allcheck {
                    display: flex;
                    align-items: center;

                    .allcheck_icon {
                        width: 36rpx;
                        height: 36rpx;
                        background: #FFFFFF;
                        border-radius: 8rpx;
                        border: 2rpx solid #D2D2D2;
                    }

                    .allcheck_text {
                        margin-left: 18rpx;
                        font-weight: bold;
                        font-size: 28rpx;
                        color: #000000;
                    }
                }
            }

            .list {
                margin-top: 50rpx;

                .item_meal {
                    display: flex;
                    margin-bottom: 64rpx;

                    .radio_box {
                        width: 36rpx;
                        height: 36rpx;
                        background: #FFFFFF;
                        border-radius: 8rpx;
                        border: 2rpx solid #D2D2D2;
                        transition: all 0.1s linear;
                    }

                    .radio_box.checked {
                        border: 2rpx solid #0051FF;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        .active_radio_box_inside {
                            width: 24rpx;
                            height: 24rpx;
                            background: #0051FF;
                            border-radius: 8rpx;
                            border: 2rpx solid #0051FF;
                        }
                    }

                    .meal_detail {
                        margin-left: 18rpx;
                    }

                    .meal_name {
                        //height: 44rpx;
                        font-family: PingFang SC;
                        font-weight: bold;
                        font-size: 32rpx;
                        color: #000000;
                        line-height: 44rpx;
                    }

                    .item_price {
                        margin-top: 12rpx;
                        height: 58rpx;
                        display: flex;
                        align-items: flex-end;

                        .red_price {
                            display: flex;
                            align-items: flex-end;
                            font-family: DIN;
                            font-weight: bold;
                            font-size: 28rpx;
                            color: #FF0000;

                            .big_price {
                                font-size: 48rpx;
                                line-height: 1;
                            }
                        }

                        .original_price,
                        .now_price {
                            font-family: PingFang SC;
                            font-weight: bold;
                            font-size: 28rpx;
                            color: #999999;
                        }

                        .original_price {
                            margin-left: 34rpx;
                            margin-right: 48rpx;
                        }
                    }
                }
            }
        }
    }

    .buy_btn {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 102rpx;
        background: linear-gradient(180deg, #1946F9 0%, #0F67FF 100%);
        font-weight: bold;
        font-size: 36rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 102rpx;
    }
}
</style>